:root {
  user-select: none;
  --checkbox-size: 16px;
}

.task-body {
  padding-top: 5px;
  cursor: grabbing;
  /* --task-foreground: var(--foreground);
  --task-background: var(--background);
  --task-accent: var(--accent);
  --task-alt-accent: var(--alt-accent);
  --text-color: var(--foreground); */
  --task-text: var(--foreground);
  --task-border: var(--foreground);
  --task-background: var(--background);
  --task-checkbox-checked: var(--accent);
  --task-checkbox-hovered: var(--alt-accent);
  --task-checkbox-default: var(--foreground);
}

/* DO NOT RENAME (drag) */
.task {
  border-radius: 6px;
  background-color: var(--task-background);
  cursor: grabbing;
  border: var(--task-border) 1px solid;
  display: flex;
  color: var(--task-text);
  padding: 5px;
  padding-right: 6px;
  font-weight: var(--task-title-font-weight);
  line-height: var(--task-title-line-height);
  letter-spacing: var(--task-title-letter-spacing);
}

.task-unchecked {
  opacity: 1;
}

.task-checked {
  text-decoration: line-through;
  opacity: 0.5;
}

.task:hover {
  border: var(--task-checkbox-checked) 1px solid;
  animation: pulsate 0.25s ease both;
  transition: border 0.25s;
}

@keyframes pulsate {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.98);
  }
  100% {
    transform: scale(1);
  }
}

.task-input:empty{
  display : block;
}

/* DO NOT RENAME (drag) */
.task-input {
  /* This is has been moved to constants because we use it to find the number of rows a task should have */
  font-size: var(--task-title-font-size);
  line-height: var(--task-title-line-height);
  letter-spacing: var(--task-title-letter-spacing);
  /* used 4.5lh here for 4 lines + half a line to show the user the task is scrollable if over 4 lines */
  max-height: 4.5lh;
  overflow-y: scroll;

  pointer-events: none;

  /* manually force wrapping because of content-editable side effects */
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;

  overscroll-behavior: contain;
  user-select: none;
  -webkit-user-select: none;

  /* 31px for the checkbox and borders */
  width: calc(100% - 21px);
  background-color: rgba(0, 0, 0, 0);
  border: none;
  color: var(--task-text);
  margin: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 5px;
  padding-right: 0px;

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: bottom;
  mask-position: bottom;
}

.task-input::-webkit-scrollbar {
  display: none;
}

.task-input:hover,
.task-input:focus {
  border: none;
  outline: none;
}

/* Enable text selection only when actively editing/renaming */
.task-input:focus {
  user-select: text;
  -webkit-user-select: text;
}

.task-input.fade-bottom {
  -webkit-mask-image: linear-gradient(
    to bottom,
    black 0%,
    black calc(100% - 0.5lh),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    black 0%,
    black calc(100% - 0.5lh),
    transparent 100%
  );

  /* More aggressive fading used for debugging (fade-bottom) */
  /* -webkit-mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%); */
}

/* DO NOT RENAME (drag) */
.task-checkbox {
  border-radius: 6px;
  width: var(--checkbox-size);
  /* Needed because it doesn't use ^ sometimes ¯\_(ツ)_/¯ */
  min-width: var(--checkbox-size);
  max-width: var(--checkbox-size);
  height: var(--checkbox-size);
  min-height: var(--checkbox-size);
  max-height: var(--checkbox-size);
  cursor: pointer;
  color: var(--task-text);
  /* margin-top: 1.5px; */
}

.time-checkbox {
  border-radius: 6px;
  width: var(--checkbox-size);
  /* Needed because it doesn't use ^ sometimes ¯\_(ツ)_/¯ */
  min-width: var(--checkbox-size);
  max-width: var(--checkbox-size);
  height: var(--checkbox-size);
  min-height: var(--checkbox-size);
  max-height: var(--checkbox-size);
  cursor: pointer;
  color: var(--task-text);
  /* margin-top: 1.5px; */
}

.task-checkbox-unchecked {
  background-color: var(--task-checkbox-default);
}

.task-checkbox-unchecked:hover {
  background-color: var(--task-checkbox-hovered);
  animation: pulsate 0.25s ease both;
}

.task-checkbox-checked {
  background-color: var(--task-checkbox-checked);
}

.task-checkbox-checked:hover {
  animation: pulsate 0.25s ease both;
}

.description-box {
  position: absolute;
  width: 200px;
  min-height: 120px;
  max-height: 2000px;
  background: var(--alt-background);
  border: var(--modal-border-width) solid var(--foreground);
  border-radius: 10px;
}

.description-text:focus {
  outline: none;
}

.description-text {
  margin: 5px;
}

.description-text:empty:not(:focus):before {
  content: attr(data-text);
}

.time-picker {
  padding: 0px;
  font-size: 18px;
  display: none;
  color: var(--task-text);
  padding-left: 4px;
  padding-top: 2px;
  padding-bottom: 2px;
}

.time-text {
  margin: 0px;
  padding: 0px;
  display: inline-block;
  color: var(--task-text);
  width: 22.02px;
  /* height: 23px; */
  overflow: hidden;
  vertical-align: top;
  text-align-last: end;
  /* TODO set fixed size for 2 digit text, it will make 
  scroll less annoying from two to one digit change*/
}

.time-text:hover {
  cursor: ns-resize;
}

.due-time {
  display: block;
}

.duration-time {
  display: block;
}

.time-text:focus {
  outline: solid 0.5px var(--accent);
  border-radius: 1px;
  cursor: none;
}

.time-text-letters {
  color: var(--task-text);
  margin: 0px;
  padding: 0px;
  font-size: 16px;
  display: inline-block;
  /* TODO make spacing consistent (alex)*/
}

.time-text-labels {
  color: var(--task-text);
  margin: 0px;
  padding: 0px;
  font-size: 18px;
  display: inline-block;
  width: 55px;
}

.due-time-label {
  margin: 0px;
  display: none;
}

.duration-time-label {
  margin: 0px;
  float: right;
  display: block;
}